<template>
  <div class="app-container banner_page">
    <div style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;">
        <el-col :span="22">
          <el-button type="primary" @click="showEditpage('')">新增</el-button>
          <el-button @click="opItemizeStatus(1)">上架</el-button>
          <el-button @click="opItemizeStatus(2)">下架</el-button>
          <el-button @click="delItemize">删除</el-button>
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="name"
          label="分类标题"
        />
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        />
        <el-table-column
          prop="sorttime"
          label="关联商品"
          show-overflow-tooltip
        />
        <el-table-column
          prop="updatetime"
          label="最后编辑时间"
          show-overflow-tooltip
        />
        <!-- <el-table-column
					prop="commodityid"
					label="编辑人"
					show-overflow-tooltip>
				</el-table-column> -->
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="opItemizeSort(scope.row)">置顶</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :total="count"
          @current-change="getData"
        />
      </div>
    </div>

  </div>
</template>

<script>
import { itemizeIndex, opItemizeStatus, itemizeAdd, itemizeEdit, delItemize, opItemizeSort } from '@/api/commodity'
export default {
  components: {

  },
  data() {
    return {
      showEdit: false,
      tableData: [],
      multipleSelection: [],
      addData: '',

      total: 1,
      count: 1
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },

    closeEditpage() {
      this.showEdit = false
    },
    getData(page) {
      itemizeIndex({ frames: 1, page: page }).then(res => {
        this.tableData = res.detail.data.list
        this.count = Number(res.detail.data.count)
        this.total = Number(res.detail.data.total)
      })
    },
    opItemizeSort(data) {
      const self = this
      opItemizeSort({
        itemizeid: data.itemizeid
      }).then(response => {
        this.getData(1)
        self.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },
    opItemizeStatus(status) {
      const self = this
      const itemizeid = []
      self.multipleSelection.forEach(row => {
        itemizeid.push(row.itemizeid)
      })

      opItemizeStatus({
        itemizeid: itemizeid.toString(),
        status: status
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          itemizeid.forEach(id => {
            row.itemizeid == id ? row.status = status : row.status
          })
        })
      })
    },
    delItemize() {
      const self = this
      this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const itemizeid = []
        self.multipleSelection.forEach(row => {
          	itemizeid.push(row.itemizeid)
        })
        delItemize({
          		itemizeid: itemizeid.toString()
          	}).then(response => {
          	self.$message({
          		message: '操作成功',
          		type: 'success'
          	})
          	this.$refs.multipleTable.clearSelection()
          itemizeid.forEach(id => {
            self.tableData = self.tableData.filter(function(row) {
              return row.itemizeid != id
            })
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    showEditpage(data) {
      let title = ''
      data ? title = '编辑' : title = '新增'
      this.$prompt('分类标题', title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (data) {
          this.itemizeEdit(value, data.itemizeid)
        } else {
          this.itemizeAdd(value)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    itemizeAdd(name) {
      itemizeAdd({ name: name }).then(res => {
        this.getData(1)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    itemizeEdit(name, itemizeid) {
      itemizeEdit({ name: name, itemizeid: itemizeid }).then(res => {
        this.getData(1)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    }

  }
}
</script>

<style scoped>
.banner_page{
	position: relative;

}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>

